$(function () {
    // load();
    // $("#title").on("keydown", function (e) { // 按键触发事件
    //     // var todolist = [{title: '我今天吃八个馒头',done: false}, {title: '我今天学习jq',done: false}, ];
    //     if (e.keyCode == 13) { // 13 是回车键
    //      if ($(this).val() == "") {
    //         alert("请输入内容");
    //      } else {
    //         var local = getDate(); // 声明变量得到函数返回值
    //         local.push({ title: $(this).val(), done: false }); // 往数组里添加新的对象格式,方便之后遍历取值
    //         saveDate(local); // 把用户输入的信息重新追加保存到叫todolist的本地存储中.
    //          load();
    //          $(this).val("");
    //       }
    //     }
    // });
    // $("ol,ul").on("click", "a", function () { // 事件委托未来创建的a绑定点击事件
    //     var date = getDate(); // 声明变量取到本地存储中的值
    //     var index = $(this).attr("index"); // 得到点击a的索引号
    //     date.splice(index, 1); // 数组删除方法splice(从第几个元素开始,删除几个)
    //     saveDate(date); // 把删除过的数组重新保存在本地存储中
    //     load(); 
    // })
    // $("ol,ul").on("change", "input", function () {
    //         var date = getDate();
    //         var index = $(this).siblings("a").attr("index");
    //         date[index].done = $(this).prop("checked");
    //         saveDate(date);
    //         load(); 
    // })
    // function getDate() {
    //     var date = localStorage.getItem("todolist"); // 取到本地存储中叫todolist的数据给到date
    //     if (date !== null) { // 做出判断
    //         return JSON.parse(date); // 取出本地存储的数据,重新转换为数组/对象
    //     } else {
    //         return [];// 如果没有数据的时候会返回null,后续用push()方法的时候会报错,所以需要返回一个数组
    //     }
    // };
    // function saveDate(date) {
    //     localStorage.setItem("todolist", JSON.stringify(date)); // 存入数据,转换为JSON字符串格式
    // };
    // function load() { 
    //     $("ol,ul").html(""); // 调用最开始,将ol里面内容清空
    //     var count = 0;
    //     var num = 0;
    //     $.each(getDate(), function (i, ele) { // 遍历每个数组元素,i 是索引,ele是元素,因为元素是对象,所以ele.属性名可得到属性值
    //         if (ele.done == false) {
    //             $("ol").prepend($(`<li>
    //         <input type="checkbox">
    //         <p>${ele.title}</p>
    //         <a href="javascript:;" index = ${i}></a> 
    //     </li>`)); // 给a设置自定义属性
    //             count++;
    //         } else {
    //             $("ul").prepend($(`<li>
    //             <input type="checkbox" checked='checked'>
    //             <p>${ele.title}</p>
    //             <a href="javascript:;" index = ${i}></a>
    //         </li>`));
    //             num++;
    //        }
    //         // 每循环遍历一次,就往ol里面添加产生数据个数的li. 
    //     });
    //     $("#todocount").html(count);
    //     $("#donecount").html(num);
    // };
    load();
    $("#title").on("keydown", function (e) {
        if (e.keyCode == 13) {
            if ($(this).val() == "") {
                alert("请输入内容");
            } else {
                var local = getDate();
                local.push({ title: $(this).val(), done: false });
                saveDate(local);
                load();
                $(this).val("");
            }
        }
    });
    $("ol ,ul").on("change", "input", function () {
        var date = getDate();
        var index = $(this).siblings("a").attr("index");
        date[index].done = $(this).prop("checked");
        saveDate(date);
        load();
    });
    $("ol ,ul").on("click", "a", function () {
        var date = getDate();
        var index = $(this).attr("index");
        date.splice(index, 1);
        saveDate(date);
        load();
    });
    function getDate() {
        var date = localStorage.getItem("todolist");
        if (date !== null) {
            return JSON.parse(date);
        } else {
            return [];
        }
    };
    function saveDate(date) {
        localStorage.setItem("todolist", JSON.stringify(date));
    };
    function load() {
        var n = 0;
        var m = 0;
        $("ol,ul").html("");
        $.each(getDate(), function (i, ele) {
            if (ele.done) {
                $("ul").prepend($(`<li>
                <input type="checkbox" name="" id="" checked='checked'>
                <p>${ele.title}</p>
                <a href="javascript:;" index = '${i}'></a>
            </li>`));
                n++;
            } else {
                $("ol").prepend($(`<li>
                <input type="checkbox" name="" id="" >
                <p>${ele.title}</p>
                <a href="javascript:;" index = '${i}'></a>
            </li>`));
                m++;
            }
        });
        $("#todocount").html(m);
        $("#donecount").html(n);
    }
    
})